<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ include file="include.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ include file="menu.jsp" %>

<link type="text/css" href="../css/newMessage.css" rel="stylesheet"/>
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $("#in .message_body").hide();
          $("#out .message_body").hide();

        $("#inLink").click(function() {
            $("#out").hide()
            $("#outLink").removeClass("active_tab")
            $("#in").show()
            $("#inLink").addClass("active_tab");
        });

        $("#outLink").click(function() {
            $("#in").hide()
            $("#inLink").removeClass("active_tab")
            $("#out").show()
            $("#outLink").addClass("active_tab");

        });

         $(".message_head").click(function() {
            $(this).next(".message_body").slideToggle(500)
            return false;
        });
//
//		$(".message_head").click(function() {
//            var id = $(this).parent("div").attr("id");
//			alert(id)
//			return false;
//        });

    });
</script>



<div class="title">Сообщения</div>
<br>


<div class="grid">
    <div id="menu">
        <div>
            <a href="#" id="inLink" class="elink active_tab">Входящие</a>
        </div>
        <div>
            <a href="#" id="outLink" class="elink">Исходящие</a>
        </div>
    </div>

    <div id="content">
        <div id="in">
            <c:forEach items="${receivedMessages}" var="m">
                <div class="message" id="${m.messageId}">
                <a href="#" class="message_head"><c:out value="${m.title}"/> &nbsp; <c:out value="${m.fromUser.login}"/>
                    &nbsp; <c:out value="${m.date}"/> </a>

                    <div class="message_body"><c:out value="${m.body}"/></div>
                </div>
            </c:forEach>
        </div>
        <div id="out" style="display:none;">
            <c:forEach items="${sentMessages}" var="m">
                <div class="message" id="${m.messageId}">
                <a href="#" class="message_head"><c:out value="${m.title}"/> &nbsp;
                        <c:out value="${m.toUser.login}"/> &nbsp;
                    <c:out value="${m.date}"/> </a>

                    <div class="message_body"><c:out value="${m.body}"/></div>
                </div>
            </c:forEach>
        </div>

    </div>
</div>



<div class="form" style="clear:both">
    <br>
    <form:form commandName="newMessage">
        <fieldset>
            <table>
                <tr>
                    <td>Заголовок сообщения</td>
                    <td>
                            <form:input path="title"/>
                    <td>
                    <td><form:errors path="title" cssStyle="color:red;"/></td>
                </tr>
                <tr>
                    <td>Кому</td>
                    <td>
                            <form:select path="toUser" items="${users}" itemLabel="login" itemValue="userId"/>
                    <td>
                    <td><form:errors path="toUser" cssStyle="color:red;"/></td>
                </tr>
                <tr>
                    <td>Сообщение</td>
                    <td>
                            <form:textarea path="body" cols="35" rows="5"/>
                    <td>
                    <td><form:errors path="body" cssStyle="color:red;"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td align="right"><input type="submit" value="submit" class="button" id="submit">
                    <td></td>
                </tr>
            </table>
        </fieldset>
    </form:form>
</div>

